<template>
  <div class="btn_space">
    <van-loading v-if="loading" class="text-center mt-15"
      >加载中...</van-loading
    >
    <div v-else class="page_space">
      <p class="title_1">被采样主体信息</p>
      <card-wrap class="mb-15">
        <card-item title="经营主体">{{
          info.intercourseEnterpriseName
        }}</card-item>
        <card-item title="主体类型">{{
          info.intercourseEnterpriseDTO.subjectTypeText
        }}</card-item>
        <card-item
          v-if="
            info.intercourseEnterpriseDTO.subjectType !==
            'OtherSellersOfEdibleAgricultural'
          "
          title="所属市场"
          >{{ info.intercourseEnterpriseDTO.managementEntName }}</card-item
        >
      </card-wrap>

      <p class="title_1">基本信息</p>
      <card-wrap class="mb-15">
        <card-item title="检测类别">{{ info.uploadBizTypeText }}</card-item>
        <card-item title="采样人员">{{ info.handlerName }}</card-item>
        <card-item title="采样日期">{{ info.billDate }}</card-item>
        <card-item title="采样编号">{{ info.billNo }}</card-item>
      </card-wrap>

      <p class="title_1">样品信息</p>
      <card-wrap class="mb-15">
        <card-item title="样品自编号">{{
          info.detailInfoDTOS[0].businessVarietyCode
        }}</card-item>
        <card-item title="样品名称">{{
          info.detailInfoDTOS[0].businessVarietyName
        }}</card-item>
        <card-item title="采样数量">
          <span>{{ info.detailInfoDTOS[0].num }}</span>
          <span v-if="info.detailInfoDTOS[0].num">{{
            info.detailInfoDTOS[0].packUnitName
          }}</span>
        </card-item>
      </card-wrap>

      <p class="title_1">样品供货信息</p>
      <card-wrap class="mb-15">
        <card-item title="进货单号">{{
          info.detailInfoDTOS[0].billNo
        }}</card-item>
        <card-item title="供货者名称">{{
          info.detailInfoDTOS[0].intercourseEnterpriseName
        }}</card-item>
        <card-item title="进货日期">{{ info.detailInfoDTOS[0].produceDate }}</card-item>
        <card-item title="进货数量">
          <span>{{ info.detailInfoDTOS[0].secondNum }}</span>
          <span v-if="info.detailInfoDTOS[0].secondNum">千克</span>
        </card-item>
        <card-item title="产地来源">{{
          info.detailInfoDTOS[0].producer === 'FALSE'
            ? '国产'
            : info.detailInfoDTOS[0].producer === 'TRUE'
            ? '进口'
            : ''
        }}</card-item>
        <card-item title="产地">{{
          info.detailInfoDTOS[0].originPlaceInfoAreaName
        }}</card-item>
      </card-wrap>

      <p class="title_1">备注与附件</p>
      <card-wrap>
        <card-item title="检验报告">
          <div style="display: flex; flex-wrap: wrap">
            <img
              v-for="(item, index) in info.businessFileDTOList"
              :key="index"
              class="avatar"
              :src="getFile(item.fileId)"
              alt=""
              @click="
                previewImg(
                  '/manage/file/uploadFile.do?action=previewAsImage&fileId=' +
                    item.fileId
                )
              "
            />
          </div>
        </card-item>
        <card-item title="备注">
          <div class="over_line">
            <span v-if="isComplete || info.description.length <= 42">{{
              info.description
            }}</span>
            <span v-else>{{ info.description.substring(0, 42) + '...' }}</span>
            <span
              v-if="info.description.length > 42"
              class="show"
              @click="toComplete"
              >{{ isComplete ? '收起' : '展开' }}</span
            >
          </div>
        </card-item>
      </card-wrap>

      <div class="btn_wrap">
        <template v-if="info.state === 'ToBeChecked'">
          <button class="btn danger" @click="cancelBill()">作废</button>
          <!-- <button class="btn middle">补录供货信息</button> -->
        </template>
        <template v-else-if="info.state === 'DRAFT'">
          <button class="btn middle danger" @click="deleteDraft()">删除</button>
          <button class="btn middle" @click="goto('/edit-draft?id=' + id)">
            编辑
          </button>
        </template>
        <template v-else-if="info.state === 'ToBeDetect'">
          <button class="btn" @click="goto('/immediate-detection?id=' + id)">
            立即检测
          </button>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import cardWrap from '@/components/base-card/wrap'
import cardItem from '@/components/base-card/item'
import { getBillDetail, cancelBill, deleteDraft } from '@/api/bill'
import { getAreaInfo, getFile } from '@/api/base'
import { ImagePreview } from 'vant'
export default {
  name: 'samplingDetails',
  components: { cardWrap, cardItem },
  data() {
    return {
      isComplete: false,
      info: {},
      loading: true,
      id: '',
      getFile
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getBillDetail()

    // 所需数据
    // id 2308241615235920000
    // 检测类别 uploadBizTypeText
  },
  methods: {
    // 删除草稿
    deleteDraft() {
      this.$dialog
        .alert({
          title: '是否删除?',
          showCancelButton: true
        })
        .then(async () => {
          const { code } = await deleteDraft(this.id)
          if (code === '0') {
            this.$toast.success('删除成功')
            this.$router.back()
          } else {
            console.log('fail')
          }
        })
        .catch(() => {
          // on cancel
        })
    },
    // 作废
    cancelBill() {
      this.$dialog
        .alert({
          title: '是否作废?',
          showCancelButton: true
        })
        .then(async () => {
          // on close
          const { code } = await cancelBill(this.id)
          if (code === '0') {
            this.$toast.success('操作成功')
            this.getBillDetail()
          } else {
            console.log('fail')
          }
        })
        .catch(() => {
          // on cancel
        })
    },
    // 采样台账
    async getBillDetail() {
      const res = await getBillDetail(this.id)
      if (res.code === '0') {
        this.info = res.data
        // 获取产地来源
        let originPlaceInfoName = res.data.detailInfoDTOS.originPlaceInfoName
        if (originPlaceInfoName) {
          const { data: area } = await getAreaInfo(
            res.data.detailInfoDTOS.originPlaceInfoName
          )
          this.info.originPlaceInfoAreaName =
            area.secondAreaName + area.threeAreaName
        } else {
          this.info.originPlaceInfoAreaName = ''
        }
        // 获取检测报告
        // let relationBillId = res.data.relationBillId
        // if (relationBillId) {
        //   const { data: report } = await getBillReport()
        //   this.info.reportData = report
        // } else {
        //   this.info.reportData = []
        // }
        this.info.reportData =
          res.data.detailInfoDTOS[0].businessFileDTOList || []
      } else {
        // this.$refs.toast.show({ text: res.message })
      }
      this.loading = false
    },
    toComplete() {
      this.isComplete = !this.isComplete
    },
    // 预览
    previewImg(url) {
      ImagePreview({
        images: [url],
        showIndex: false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.avatar {
  width: 68px;
  height: 68px;
  border-radius: 4px;
  margin-left: 4px;
  margin-bottom: 4px;

  &:last-child {
    margin-right: 0;
  }
}

.over_line {
  font-size: 14px;
  font-weight: normal;
  line-height: 19px;
  letter-spacing: 0px;
  color: #171819;
  position: relative;
  white-space: normal;

  .show {
    position: absolute;
    bottom: 0;
    right: 0;
    font-family: PingFang SC Medium;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0px;
    /* 蓝 */
    color: #2163e0;
  }
}
</style>
